
<template>
  <div class="nav-menus">
    <div class="nav-location" @click="setLoction">
      {{currentCity.nm}}
      <span class="city_change"></span>
    </div>
    <div class="nav-nowpalying" @click="changeNowPalying" :class="{active:isActive}">正在热映</div>
    <div class="comesoon" @click="changeComeSoon" :class="{active:!isActive}">即将上映</div>
    <div class="nav-search" @click="movieSearch">
      <span>
        <i class="el-icon-search search_icon"></i>
      </span>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      isActive: true,
      city: ""
    };
  },
  computed: {
    ...mapState(["currentCity"])
  },
  activated() {
    console.log('11111111')
    if (this.$route.path == "/home/film/nowplaying") {
      this.isActive = true;
    }
    if (this.$route.path == "/home/film/comingsoon") {
      this.isActive = false;
    }
  },
  methods: {
    changeNowPalying() {
      if (this.$route.path === "/home/film/nowplaying") return;
      this.$router.replace("/home/film/nowplaying");
      this.isActive = true;
    },
    changeComeSoon() {
      if (this.$route.path === "/home/film/comingsoon") return;
      this.$router.replace("/home/film/comingsoon");
      this.isActive = false;
    },
    setLoction() {
      this.$router.push("/cityList");
    },

    movieSearch() {
      this.$router.push("/movieSearch");
    }
  }
  
};
</script>
<style scoped>
.nav-menus {
  flex-shrink: 0;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 15px;
  color: #666666;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
}
.nav-nowpalying,
.comesoon {
  /* line-height: 45px; */
  padding: 8px 15px;
  border-bottom: 2px solid #fff;
}

.search_icon {
  font-size: 18px;
  color: #e54847;
  font-weight: bold;
}

.active {
  color: #e54847;
  border-bottom: 2px solid #e54847;
}
.city_change {
  display: inline-block;
  margin-left: 4px;
  margin-top: 5px;
  width: 0;
  height: 0;
  border: 4px solid #b0b0b0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
</style>
